import { Grid, Tabs, Dialog, Cell } from 'react-vant';
import { ShopO } from '@react-vant/icons';
import { connect } from 'dva';
import { useEffect, useState } from 'react';
import { useSetState } from 'react-vant/es/hooks';

export default connect(({ index }) => index)((props) => {
  const title = [
    {
      text: '胶囊',
      value: 'catchSprite',
    },
    {
      text: '道具',
      value: 'statusReurn',
    },
  ];
  const [dialogVisible, setDialogVisible] = useState(false);
  const [currGoods, setCurrGoods] = useState(null);
  useEffect(() => {
    // console.log('props', props);
  }, []);

  const getDetail = (item) => {
    setDialogVisible(true);
    setCurrGoods(item);
  };
  return (
    <div>
      <Tabs active="c">
        {title.map((item, index) => (
          <Tabs.TabPane name={item.value} key={item.value} title={item.text}>
            <Grid square>
              {/* {Array.from({ length: 8 }, (_, i) => (
                                <Grid.Item key={i} icon={<ShopO />} text="文字" />
                            ))} */}
              {/* {console.log('props12121', props)} */}
              {props.goods
                .filter((ite) => ite.type == item.value)
                .map((it) => (
                  <Grid.Item
                    key={it.name}
                    icon={<ShopO />}
                    onClick={() => getDetail(it)}
                    text={it.name + ' ' + it.size}
                  />
                ))}
            </Grid>
          </Tabs.TabPane>
        ))}
      </Tabs>
      <Dialog
        visible={dialogVisible}
        title="物品信息"
        onConfirm={() => {
          setDialogVisible(false);
        }}
      >
        {currGoods && (
          <Cell.Group>
            <Cell title="物品名称：" value={currGoods.name} />
            <Cell title="物品数量：" value={currGoods.size} />
            <Cell title="物品信息：" value={currGoods.info} />
          </Cell.Group>
        )}
      </Dialog>
    </div>
  );
});
